<!DOCTYPE html>
<html lang="en" xmlns:padding-left="http://www.w3.org/1999/xhtml">
<head>
    <title>医院挂号系统</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
</head>


<body>

<div class="container">

    <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">
            <h1>挂号信息</h1>
        </div>

        <div class="panel-body">
            <!-- 警告框 -->
            <div class="alert alert-warning alert-dismissible hide" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>错误：</strong>添加失败

            </div>

            <!-- 表单 -->
            <form class="form-horizontal">
                <div class="form-group">
                    <label  class="col-sm-2 control-label">病人姓名</label>
                    <div class="col-sm-5">
                        <input type="text"   class="form-control" id="name" placeholder="请输入病人姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="department" class="col-sm-2 control-label">科室类型</label>
                    <div class="col-sm-5">
                        <select id="department" name="department" class="col-sm-20 form-control">
                            <option hidden>请选择</option>
                            <option value="1001">耳鼻喉科</option>
                            <option value="1002">骨科</option>
                            <option value="1003">心血管科</option>
                            <option value="1004">牙科</option>
                        </select>
                    </div>
                </div>

                <div id="addItem" class="form-group">
                </div>

                <div class="form-group">
                    <label for="register_type" class="col-sm-2 control-label">门诊类型</label>
                    <div class="col-sm-5">
                        <select id="register_type" name="register_type" class="col-sm-20 form-control">
                            <option hidden>请选择</option>
                            <option value="1">普通门诊</option>
                            <option value="2">急诊</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" id="btn">添加</button>
                        <button type="reset" class="btn btn-danger" >重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>

    $(function () {
        $('#btn').click(function () {
            $.ajax({
                type: "post",
                url: "/k",
                data: JSON.stringify({
                    name: $("#name").val(),
                    register_type: $("#register_type option:selected").val(),
                    department_type: $("#department").val(),
                    doctor_id: $("#doctor_id").val(),
                    doctor_type: $("#doctor_id option:selected").attr("doctor-type")
                }),
                contentType: "application/json;charset=UTF-8",
                success: function (data) {
                    window.location = "selectRegister.html";

                }
            });
        });
    });

    document.querySelector("select").addEventListener("click", function () {
        let addItem = document.querySelector("#addItem");
        $.ajax({
            type: "post",
            url: "/pp",
            data: JSON.stringify({
                department: $("#department option:selected").val(),
            }),
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                console.log(data)
                let html = `<label for="doctor_id" class="col-sm-2 control-label">医生姓名</label><div class="col-sm-5"><select id="doctor_id" name="doctor_id" class="col-sm-20 form-control">`
                for (let oneDoc of data) {
                    let canWork = oneDoc.is_empty === 0 ? "可预约" : "不可预约";
                    let docZhi =  null;
                    if(oneDoc.doctor_type==1){ docZhi="专家"}
                    else if(oneDoc.doctor_type==2){ docZhi="普通医生"}
                    else if(oneDoc.doctor_type==3){ docZhi="值班表医生"}
                    html += `<option id="${oneDoc.doctor_type}" value="${oneDoc.id}" doctor-type="${oneDoc.doctor_type}">${oneDoc.name} 职称:${docZhi}(${canWork})</option>`
                }
                html+=`</select></div>`
                addItem.innerHTML = html;
            }
        })
    });

</script>
</html>